<template>
  <div>
    <el-form-item label="废气排放情况">
      <el-radio-group v-model="value.wasteGasStatus" :disabled="disabled" @input="handleChange">
        <el-radio v-for="item in dict.type.env_gas_pollution_status" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
      </el-radio-group>
    </el-form-item>
    <table v-if="value.wasteGasStatus === '有废气排放'" class="pars-table" style="width: 1200px">
      <thead>
        <tr>
          <th>产生工段</th>
          <th>废气排放情况</th>
          <th>处理设施名称</th>
          <th>排气筒编号</th>
          <th>污染因子</th>
          <th v-if="!disabled" class="operation">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, index) in data" :key="row.id">
          <th>
            <el-input v-model="row.productSection" :disabled="disabled" placeholder="请输入产生工段" @change="handleChange" />
          </th>
          <th>
            <el-select v-model="row.dischargeStatus" :disabled="disabled" placeholder="请选择" @change="handleChange">
              <el-option
                v-for="dict in dict.type.env_gas_gas_pollution_status"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </th>
          <th>
            <el-input v-model="row.handleEquipName" :disabled="disabled" placeholder="请输入处理设施名称" @change="handleChange" />
          </th>
          <th>
            <el-input v-model="row.exhaustFunnelNo" :disabled="disabled" placeholder="请输入排气筒编号" @change="handleChange" />
          </th>
          <th>
            <el-input v-model="row.pollutionFactor" :disabled="disabled" placeholder="请输入污染因子" @change="handleChange" />
          </th>
          <th v-if="!disabled">
            <i class="el-icon-remove icon remove" @click="handleRemove(index)" />
            <i class="el-icon-circle-plus icon add" @click="handleAdd(index)" />
          </th>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import { parSettingMixin } from '@/utils/mixins'

export default {
  name: 'WasteGas',
  mixins: [parSettingMixin],
  dicts: ['env_gas_pollution_status', 'env_gas_gas_pollution_status'],
  props: {
    disabled: Boolean,
    value: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      data: this.value && this.value.gasEquipmentItems && this.value.gasEquipmentItems.length > 0
        ? this.value.gasEquipmentItems
        : [{ productSection: '', dischargeStatus: '', handleEquipName: '', exhaustFunnelNo: '', pollutionFactor: '' }],
      keys: ['productSection', 'dischargeStatus', 'handleEquipName', 'exhaustFunnelNo', 'pollutionFactor']
    }
  },
  watch: {
    value(val) {
      this.data = val && val.gasEquipmentItems && val.gasEquipmentItems.length > 0 ? val.gasEquipmentItems : [this.getEmptyRow()]
    }
  },
  methods: {
    handleChange() {
      const data = {
        ...this.value,
        gasEquipmentItems: this.data
      }
      this.$emit('input', data)
      this.$emit('change', data)
    }
  }
}
</script>
